/*
 * @Description: 展示wapper弹窗
 * @Author: yangrongxin
 * @Date: 2021-05-31 11:18:18
 * @LastEditors: yangrongxin
 * @LastEditTime: 2021-08-05 09:23:23
 */

import React from 'react';
import { View, Button } from '@tarojs/components';
import { AtModal, AtModalHeader, AtModalContent, AtModalAction, AtIcon } from 'taro-ui';
import styles from './index.module.less';

interface IModalWapperProps {
  isOpened: boolean; // 控制当前弹窗的显示隐藏
  canClose?: boolean; // 控制当前能否点击进行关闭
  onClose: any; // 关闭的方法
  ContentChildren?: any; // 内容元素
  btnGroup?: any;
  modalClass?: string; // 当前弹窗的扩展样式
  modalContentClass?: string; // 当前弹窗内容的扩展样式
}

const ModalWapper = (props: IModalWapperProps) => {
  const { isOpened, canClose = true, onClose, ContentChildren, btnGroup, modalClass, modalContentClass } = props;

  return (
    <AtModal className={`${styles.modalWapper} ${modalClass}`} isOpened={isOpened} closeOnClickOverlay={false}>
      {canClose && (
        <AtModalHeader>
          <View className={styles.topCloseIcon} onClick={onClose}>
            <View>
              <AtIcon value="close" size="14" />
            </View>
          </View>
        </AtModalHeader>
      )}
      <AtModalContent>
        <View className={`${styles.contentWapper} ${modalContentClass}`}>
          {ContentChildren}
          {btnGroup !== null && (btnGroup || <Button onClick={onClose}>知道了</Button>)}
        </View>
      </AtModalContent>
    </AtModal>
  );
};

export default ModalWapper;
